<template>
    <div class="content-wrap">
        <div class="search-box">
            <el-form :inline="true" :model="searchFrom" label-width="80px" ref="form" size="mini">
                <el-form-item prop="uicName">
                    <el-input clearable placeholder="姓名" v-model="searchFrom.name"></el-input>
                </el-form-item>
                <el-button @click="getAdminList(1)" size="mini" type="primary">搜索</el-button>
            </el-form>
        </div>
        <div class="search-box">
            <el-form :inline="true" label-width="80px" ref="form" size="mini">
                <el-form-item>
                    <el-button @click="toSave('add')" type="primary">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-box">
            <div class="table-box">
                <el-table :data="adminList" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form class="demo-table-expand" inline label-position="left">
                                <el-form-item label="编辑时间：">
                                    <span>{{ dateFormat(props.row.editTime) }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="姓名" prop="name"></el-table-column>
                    <el-table-column align="center" label="登录IP" prop="loginIp"></el-table-column>
                    <el-table-column align="center" label="角色" prop="nameAdminRole">
                        <template slot-scope="scope">{{ scope.row.arName || '超级管理员' }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="启用" prop="enableZh">
                        <template slot-scope="scope">
                            <div v-html="yesNo(scope.row.enable)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="添加时间" prop="addTime">
                        <template slot-scope="scope">{{ dateFormat(scope.row.addTime) }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="toSave('edit', scope.row)" size="mini" type="primary">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <pagination :pages="pages" @currentChange="getAdminList" @sizeChange="getAdminList(1)"></pagination>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
            <el-form ref="adminForm" :model="adminForm" :rules="adminRules" label-width="80px" size="mini">
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="请输入" v-model="adminForm.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input :placeholder="passwordTip" v-model="adminForm.password" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="enable">
                    <el-select v-model="adminForm.enable" clearable placeholder="请选择">
                        <el-option
                                v-for="(v, k) in yesNo(0, 'no')"
                                :key="k"
                                :value="k"
                                :label="v"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="adminForm.roleId" clearable placeholder="请选择">
                        <el-option
                                v-for="v in roleAll"
                                :key="v.id"
                                :value="v.id"
                                :label="v.name"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>

    import Pagination from '../../components/Pagination'
    import {date} from '../../mixins/date'
    import {logic} from '../../mixins/logic'
    import {status} from '../../mixins/status'

    export default {
        mixins: [date, logic, status],
        components: {Pagination},
        data() {
            return {
                loading: false,
                adminList: [],
                pages: this.pageConfig(),
                searchFrom: {},
                adminForm: {
                    id: 0,
                    name: '',
                    password: '',
                    enable: '2',
                    roleId: 0,
                },
                dialogTitle: '',
                dialogWay: '',
                dialogVisible: false,
                passwordTip: '',
                adminRules: {
                    name: [{ required: true, message: "请输入", trigger: "blur" }],
                    enable: [{ required: true, message: "请选择", trigger: "change" }],
                    roleId: [{ required: true, message: "请选择", trigger: "change" }],
                },
                roleAll: {}
            }
        },
        created() {
            this.getAdminList();

            this.$http.post("roleAll", {}).then(({ code, data }) => {
                if (code === 20000) {
                    this.roleAll = [{ id: 0, name: "超级管理员" }, ...data.roleAll];
                }
            });
        },
        methods: {
            getAdminList(offset) {

                if (offset) this.pages.current = offset;

                let requestData = Object.assign(
                    {
                        offsetLimit: this.pages.current,
                        lengthLimit: this.pages.size,
                    },
                    this.searchFrom
                );

                this.loading = true;

                this.$http.post("adminList", requestData).then(({code, data}) => {

                    if (code == 20000) {
                        this.pages.total = data.countList;
                        this.adminList = data.list;
                    }

                    this.loading = false;
                });

            },
            toSave(save, row) {

                this.dialogVisible = true;

                switch (save) {
                    case 'edit':

                        this.dialogWay = 'adminEditSave';
                        this.dialogTitle = '编辑管理员';
                        this.passwordTip = '为空则不修改密码';

                        this.adminForm = {
                            id: row.id,
                            name: row.name,
                            enable: row.enable.toString(),
                            roleId: row.roleId,
                        };
                        break
                    case 'add':

                        this.dialogWay = 'adminAddSave';
                        this.dialogTitle = '添加管理员';
                        this.passwordTip = '为空默认为：888888';

                        delete this.adminForm.id;

                        this.adminForm.name = '';
                        break
                }

            },
            toSubmit() {
                this.$refs["adminForm"].validate(valid => {
                    if (!valid) return false;

                    this.$http.post(this.dialogWay, this.adminForm).then(({code, message}) => {
                        if (code === 20000) {
                            this.getAdminList();
                            this.$message.success(message);
                            this.dialogVisible = false;
                        }
                    });
                });
            },
        }
    }
</script>